<template>
  <div class="health-info-section">
    <!-- 模块标题 -->
    <div class="section-header">
      <div class="header-left">
        <el-icon class="section-icon"><FirstAidKit /></el-icon>
        <h3 class="section-title">健康信息</h3>
        <el-tag v-if="completionPercentage < 100" type="warning" size="small">
          完成度 {{ completionPercentage }}%
        </el-tag>
        <el-tag v-else type="success" size="small">
          <el-icon><CircleCheck /></el-icon>
          已完成
        </el-tag>
      </div>
      <div class="header-right">
        <el-tooltip content="健康信息有助于为客户推荐合适的旅游产品和行程安排">
          <el-icon class="info-icon"><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>

    <!-- 健康信息表单 -->
    <div class="section-content">
      <!-- 整体健康评估区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><Timer /></el-icon>
          <span>整体健康评估</span>
          <span class="required-mark">建议填写</span>
        </div>
        
        <el-form 
          ref="healthAssessmentRef"
          :model="formData"
          label-width="120px"
          label-position="left"
          class="health-assessment-form"
        >
          <el-row :gutter="24">
            <!-- 健康状况 -->
            <el-col :span="12">
              <el-form-item label="健康状况">
                <el-radio-group v-model="formData.healthStatus">
                    <el-radio value="健康良好">健康良好</el-radio>
                    <el-radio value="健康一般">健康一般</el-radio>
                    <el-radio value="健康较差">健康较差</el-radio>
                    <el-radio value="健康很差">健康很差</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!-- 行动能力 -->
            <el-col :span="12">
              <el-form-item label="行动能力">
                <el-radio-group v-model="formData.mobilityAbility">
                    <el-radio value="行动自如">行动自如</el-radio>
                    <el-radio value="轻微受限">轻微受限</el-radio>
                    <el-radio value="需要辅助">需要辅助</el-radio>
                    <el-radio value="轮椅出行">轮椅出行</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 健康详情记录区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><Document /></el-icon>
          <span>健康详情记录</span>
          <span class="optional-mark">详细信息</span>
        </div>
        
        <el-form 
          ref="healthDetailsRef"
          :model="formData.details"
          label-width="120px"
          label-position="left"
          class="health-details-form"
        >
          <!-- 慢性疾病 -->
          <div class="disease-section">
            <div class="subsection-title">
              <el-icon><Money /></el-icon>
              <span>慢性疾病</span>
            </div>
            
            <el-row :gutter="24">
              <!-- 心血管疾病 -->
              <el-col :span="12">
                <el-form-item label="心血管疾病">
                  <el-checkbox-group v-model="formData.details.cardiovascularDiseases">
                    <el-checkbox value="高血压">高血压</el-checkbox>
                    <el-checkbox value="心脏病">心脏病</el-checkbox>
                    <el-checkbox value="冠心病">冠心病</el-checkbox>
                    <el-checkbox value="心律不齐">心律不齐</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <!-- 内分泌疾病 -->
              <el-col :span="12">
                <el-form-item label="内分泌疾病">
                  <el-checkbox-group v-model="formData.details.endocrineDiseases">
                    <el-checkbox value="糖尿病">糖尿病</el-checkbox>
                    <el-checkbox value="甲状腺疾病">甲状腺疾病</el-checkbox>
                    <el-checkbox value="痛风">痛风</el-checkbox>
                    <el-checkbox value="骨质疏松">骨质疏松</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <!-- 呼吸系统疾病 -->
              <el-col :span="12">
                <el-form-item label="呼吸系统">
                  <el-checkbox-group v-model="formData.details.respiratoryDiseases">
                    <el-checkbox value="哮喘">哮喘</el-checkbox>
                    <el-checkbox value="慢阻肺">慢阻肺</el-checkbox>
                    <el-checkbox value="肺气肿">肺气肿</el-checkbox>
                    <el-checkbox value="支气管炎">支气管炎</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <!-- 骨骼肌肉疾病 -->
              <el-col :span="12">
                <el-form-item label="骨骼肌肉">
                  <el-checkbox-group v-model="formData.details.musculoskeletalDiseases">
                    <el-checkbox value="关节炎">关节炎</el-checkbox>
                    <el-checkbox value="腰椎疾病">腰椎疾病</el-checkbox>
                    <el-checkbox value="颈椎病">颈椎病</el-checkbox>
                    <el-checkbox value="风湿病">风湿病</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <!-- 其他疾病 -->
              <el-col :span="24">
                <el-form-item label="其他疾病">
                  <el-input 
                    v-model="formData.details.otherDiseases"
                    type="textarea"
                    :rows="3"
                    placeholder="请详细描述其他慢性疾病或健康问题"
                    maxlength="200"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 用药情况 -->
          <div class="medication-section">
            <div class="subsection-title">
              <el-icon><Check /></el-icon>
              <span>用药情况</span>
            </div>
            
            <el-form-item label="用药信息">
              <el-input 
                v-model="formData.details.medicationInfo"
                type="textarea"
                :rows="4"
                placeholder="请详细记录常用药品名称、服药时间和剂量、特殊注意事项等"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </div>

          <!-- 饮食限制 -->
          <div class="diet-section">
            <div class="subsection-title">
              <el-icon><Star /></el-icon>
              <span>饮食限制</span>
            </div>
            
            <el-form-item label="饮食要求">
              <el-checkbox-group v-model="formData.details.dietaryRestrictions">
                <el-checkbox value="无特殊要求">无特殊要求</el-checkbox>
                <el-checkbox value="清淡饮食">清淡饮食</el-checkbox>
                <el-checkbox value="低盐低脂">低盐低脂</el-checkbox>
                <el-checkbox value="糖尿病餐">糖尿病餐</el-checkbox>
                <el-checkbox value="素食">素食</el-checkbox>
                <el-checkbox value="回族餐">回族餐</el-checkbox>
                <el-checkbox value="其他过敏">其他过敏</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <!-- 过敏详情 -->
            <el-form-item 
              v-if="formData.details.dietaryRestrictions.includes('其他过敏')"
              label="过敏详情"
            >
              <el-input 
                v-model="formData.details.allergyDetails"
                type="textarea"
                :rows="2"
                placeholder="请详细说明过敏源和注意事项"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </div>

          <!-- 保险情况 -->
          <div class="insurance-section">
            <div class="subsection-title">
              <el-icon><Check /></el-icon>
              <span>保险情况</span>
            </div>
            
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="保险信息">
                  <el-input 
                    v-model="formData.details.insuranceInfo"
                    type="textarea"
                    :rows="3"
                    placeholder="请记录医疗保险类型、旅游保险情况、保险额度等信息"
                    maxlength="300"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <!-- 健康状况总结 -->
      <div class="info-block" v-if="healthSummary">
        <div class="block-title">
          <el-icon><DataAnalysis /></el-icon>
          <span>健康状况总结</span>
        </div>
        
        <div class="health-summary">
          <el-alert 
            :title="healthSummary.title"
            :type="healthSummary.type"
            :description="healthSummary.description"
            show-icon
            :closable="false"
          />
          
          <div class="recommendations" v-if="healthSummary.recommendations.length > 0">
            <h4>旅游建议：</h4>
            <ul class="recommendation-list">
              <li v-for="(rec, index) in healthSummary.recommendations" :key="index">
                {{ rec }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  FirstAidKit, CircleCheck, QuestionFilled, Timer, Warning, 
  WarningFilled, Close, User,
  Document, Money, Check, Star, DataAnalysis
} from '@element-plus/icons-vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['validation-change'])

// 表单引用
const healthAssessmentRef = ref()
const healthDetailsRef = ref()

// 完成度计算
const completionPercentage = computed(() => {
  const fields = [
    props.formData.healthStatus,
    props.formData.mobilityAbility,
    props.formData.details?.dietaryRestrictions?.length > 0,
    props.formData.details?.cardiovascularDiseases?.length > 0 ||
    props.formData.details?.endocrineDiseases?.length > 0 ||
    props.formData.details?.respiratoryDiseases?.length > 0 ||
    props.formData.details?.musculoskeletalDiseases?.length > 0 ||
    props.formData.details?.otherDiseases
  ]
  
  const filledFields = fields.filter(field => field).length
  return Math.round((filledFields / fields.length) * 100)
})

// 健康状况总结
const healthSummary = computed(() => {
  if (!props.formData.healthStatus) return null
  
  const summary = {
    title: '',
    type: 'info',
    description: '',
    recommendations: []
  }
  
  switch (props.formData.healthStatus) {
    case '健康良好':
      summary.title = '健康状况良好'
      summary.type = 'success'
      summary.description = '客户身体健康，适合各种类型的旅游活动。'
      summary.recommendations = [
        '可以参加各种旅游活动，包括长途旅行',
        '建议购买基础旅游保险',
        '可以选择多样化的行程安排'
      ]
      break
      
    case '健康一般':
      summary.title = '健康状况一般，需要适当注意'
      summary.type = 'warning'
      summary.description = '客户有轻微健康问题，旅游时需要适当注意，但不影响正常出行。'
      summary.recommendations = [
        '建议选择舒适型旅游产品',
        '避免过于劳累的行程安排',
        '建议购买医疗保险',
        '随身携带常用药品'
      ]
      break
      
    case '健康较差':
      summary.title = '健康状况较差，需要特别关注'
      summary.type = 'error'
      summary.description = '客户有明显健康问题，旅游时需要特别关注和照顾。'
      summary.recommendations = [
        '建议选择短途、舒适的旅游产品',
        '行程安排应相对轻松',
        '必须购买全面的医疗保险',
        '建议有家人陪同出行',
        '提前了解目的地医疗条件'
      ]
      break
      
    case '健康很差':
      summary.title = '健康状况很差，不建议长途旅行'
      summary.type = 'error'
      summary.description = '客户健康状况严重，不适合长途旅行，需要谨慎评估出行风险。'
      summary.recommendations = [
        '不建议参加长途旅游',
        '如需出行，建议就近短途',
        '必须有专业人员或家人全程陪同',
        '出行前需咨询医生意见',
        '确保目的地有良好的医疗条件'
      ]
      break
  }
  
  // 根据行动能力添加建议
  if (props.formData.mobilityAbility === '需要辅助' || props.formData.mobilityAbility === '轮椅出行') {
    summary.recommendations.push('选择无障碍设施完善的景点和酒店')
    summary.recommendations.push('安排专门的无障碍交通工具')
  }
  
  // 根据疾病类型添加建议
  const diseases = [
    ...props.formData.details?.cardiovascularDiseases || [],
    ...props.formData.details?.endocrineDiseases || [],
    ...props.formData.details?.respiratoryDiseases || [],
    ...props.formData.details?.musculoskeletalDiseases || []
  ]
  
  if (diseases.includes('高血压') || diseases.includes('心脏病')) {
    summary.recommendations.push('避免高海拔和剧烈运动的旅游项目')
  }
  
  if (diseases.includes('糖尿病')) {
    summary.recommendations.push('确保饮食安排符合糖尿病患者需求')
  }
  
  if (diseases.includes('哮喘') || diseases.includes('慢阻肺')) {
    summary.recommendations.push('避免空气质量较差的目的地')
  }
  
  return summary
})

// 初始化表单数据结构
if (!props.formData.details) {
  props.formData.details = {
    cardiovascularDiseases: [],
    endocrineDiseases: [],
    respiratoryDiseases: [],
    musculoskeletalDiseases: [],
    otherDiseases: '',
    medicationInfo: '',
    dietaryRestrictions: [],
    allergyDetails: '',
    insuranceInfo: ''
  }
}
</script>

<style lang="scss" scoped>
.health-info-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E5EA;
    background: #F0FFF0;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .section-icon {
        font-size: 20px;
        color: #34C759;
      }
      
      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin: 0;
      }
    }
    
    .header-right {
      .info-icon {
        font-size: 16px;
        color: #8E8E93;
        cursor: help;
      }
    }
  }
  
  .section-content {
    padding: 24px;
  }
  
  .info-block {
    margin-bottom: 32px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .block-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 18px;
        color: #34C759;
      }
      
      .required-mark {
        background: #34C759;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: auto;
      }
      
      .optional-mark {
        background: #5AC8FA;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: auto;
      }
    }
  }
  
  
  // 子标题样式
  .subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E5EA;
    font-size: 14px;
    font-weight: 600;
    color: #3C3C43;
    
    .el-icon {
      font-size: 16px;
      color: #34C759;
    }
  }
  
  // 疾病选择样式
  .disease-section,
  .medication-section,
  .diet-section,
  .insurance-section {
    margin-bottom: 24px;
  }
  
  
  // 健康总结样式
  .health-summary {
    .recommendations {
      margin-top: 16px;
      
      h4 {
        color: #3C3C43;
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .recommendation-list {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
          padding: 4px 0;
          font-size: 14px;
          color: #3C3C43;
          position: relative;
          padding-left: 16px;
          
          &:before {
            content: '•';
            color: #34C759;
            position: absolute;
            left: 0;
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .health-info-section {
    .section-content {
      padding: 16px;
    }
    
  }
}
</style>